<!-- 表单表格 -->
<template>
  <div>
    <div class="form_content">
      <Form ref="form"
            :formData="formData"
            @submit="submit"
            @reset="reset"
            :is_sumbit_reset="true"
            :inline="true"></Form>
    </div>
    <div class="table_content">
      <el-button v-if="is_show_new"
                 class="new_btn"
                 type="primary"
                 icon="el-icon-plus"
                 @click="showNew">新建</el-button>
      <el-button v-if="is_show_import"
                 class="new_btn"
                 type="primary"
                 icon="el-icon-upload"
                 @click="showImport">导入</el-button>
      <el-button v-if="is_show_export"
                 class="new_btn"
                 type="primary"
                 icon="el-icon-download"
                 @click="exportFile">导出</el-button>
      <Table ref="table"
             v-loading="loading"
             :tableData="tableData"
             :columnData="columnData"
             :total="total"
             :type="column_type"
             :editData="editData"
             :detail_url="detail_url"
             :edit_url="edit_url"
             :is_default_edit="true"
             :labelWidth="labelWidth"
             :detail_width="detail_width"
             @refresh="refresh"
             @resetEdit="resetEdit"
             @handleSelectionChange="handleSelectionChange"
             @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange">
        <template slot="detail_content"
                  slot-scope="scope">
          <slot name="detail_content"
                :data="scope.data"></slot>
        </template>
      </Table>
      <!-- 新建弹窗 -->
      <el-dialog title="新建"
                 :visible.sync="is_new"
                 :modal="false"
                 width="50%">
        <Form ref="add"
              :formData="editData"
              @submit="submitNew"
              @reset="resetNew"
              :labelWidth="labelWidth"
              :inline="true"></Form>
      </el-dialog>
      <!-- 导入上传弹窗 -->
      <el-dialog title=""
                 :visible.sync="is_import"
                 :modal="false"
                 width="40%">
        <!-- 文件上传 -->
        <el-upload class="upload-demo"
                   ref="import"
                   v-bind="{...import_config}"
                   @on-success="onSuccess"
                   @on-remove="onRemove"
                   @on-preview="onPreview">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip"
               v-if="'message' in import_config"
               slot="tip">{{import_config.message}}</div>
        </el-upload>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      is_new: false,
      is_import: false,
      tableData: [],
      total: 0,
      loading: true,
    };
  },
  props: {
    formData: {
      type: Array,
      required: true
    },
    columnData: {
      type: Array,
      required: true
    },
    // 表格类型
    // selection/index/expand
    column_type: {
      type: String,
      default: () => {
        return 'index'
      }
    },
    // 表单标题宽度
    labelWidth: {
      type: String,
      default: () => {
        return "100px";
      }
    },
    // 请求的链接
    url: {
      type: String
    },
    // 新建链接
    new_url: {
      type: String
    },
    // 编辑链接
    edit_url: {
      type: String
    },
    // 详情链接
    detail_url: {
      type: String
    },
    // 导出文件链接
    export_url: {
      type: String
    },
    pageConfig: {
      type: Object,
      default: () => {
        return {
          page: 1,
          page_size: 10
        };
      }
    },
    // 编辑表单
    editData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 编辑表单是否使用默认的选项
    is_default_edit: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示新建按钮
    is_show_new: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    // 是否显示导入按钮
    is_show_import: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 是否显示导出按钮
    is_show_export: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    // 导入配置
    import_config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 详情弹窗大小
    detail_width: {
      type: String,
      default: () => {
        return '50%'
      }
    },
  },
  created () {
    this.getData();
    this.getQiniuToken();
  },
  watch: {
    editData (newVal, val) {
      console.log(newVal)
    }
  },
  methods: {
    // 改变每页数量
    handleSizeChange (current) {
      if (this.url) {
        this.pageConfig.pagesize = current;
        this.$refs.form.submitForm("form", true);
      } else {
        this.$emit("handleSizeChange", current);
      }
    },
    // 改变页码
    handleCurrentChange (current) {
      if (this.url) {
        this.pageConfig.page = current;
        this.$refs.form.submitForm("form", true);
      } else {
        this.$emit("handleCurrentChange");
      }
    },
    // 多选表格改变时触发
    handleSelectionChange (val) {
      this.$emit("handleSelectionChange", val);
    },
    // 清空多选表格
    clearSelection () {
      this.$refs.table.clearSelection();
    },
    // 提交表单时触发
    submit (e) {
      let data = e.data;
      console.log(e)
      if (this.url) {
        if (e.is_page || !e.is_sumbit_reset) {
          this.getData(data);
        } else {
          this.getDefaultData(data);
        }
        // this.getData(data);
      } else {
        this.$emit("sumbit", e);
      }
    },
    // 重置表单
    reset (e) {
      this.$refs.form.clearAllSelection();
    },
    // 重置编辑表单
    resetEdit () {
      this.$refs.form.clearAllSelection();
    },
    // 清空新建
    resetNew () {
      this.$refs.add.clearAllSelection();
    },
    // 只改变分页，不改变提交参数
    getData (data) {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000);
      this.$req.get(this.url, { ...this.pageConfig, ...data }).then(res => {
        this.loading = false
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    // 请求表格数据
    getDefaultData (data) {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000);
      let pageConfig = {
        page: 1,
        pagesize: 10
      }
      this.$req.get(this.url, { ...pageConfig, ...data }).then(res => {
        this.$refs.table.resetPage()
        this.loading = false
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    refresh () {
      this.$refs.form.submitForm("form", true);
    },
    // 获取七牛云token
    getQiniuToken () {
      if (!sessionStorage.getItem('qiniu_token')) {
        let data = {
          token: localStorage.getItem('token')
        }
        this.$req.get(this.$api.getadminuploadtoken, data).then(res => {
          console.log(res);
          sessionStorage.setItem('qiniu_token', res.data.token)
        })
      }
    },
    // 显示新建窗口
    showNew () {
      console.log(this.editData)
      this.editData.forEach(item => {
        item.value = '';
        if (!this.is_default_edit) {
          if ('groups' in item) {
            item.groups = []
          }
        }

        if ('is_sumbit' in item) {
          item.display = 'none'
        }

        if ('config' in item && 'fileList' in item.config) {
          item.config.fileList = []
        }
        if ('add_url' in item) {
          this.$req.get(item.add_url).then(res => {
            let data = res.data;
            for (var i in data) {
              item.groups.push({
                label: data[i][item.url_rule.labelKey],
                value: data[i][item.url_rule.valueKey]
              })
            }
          })
        }
      })
      this.is_new = true;
      // this.$req.get(this.)
    },
    // 提交新建
    submitNew (e) {
      console.log(e)
      let data = e.data;
      this.editData.forEach(item => {
        if ('display' in item && item.display == 'none') {
          delete data[item.name]
        }
      })
      this.$req.post(this.new_url, data).then(res => {
        this.$msg({
          showClose: true,
          message: '新建成功',
          type: 'success'
        })
        this.is_new = false;
        this.refresh();
      })
    },
    // 调出导入窗口
    showImport () {
      this.is_import = true;
    },
    // 调用导出方法
    exportFile () {
      // window.open(this.export_url)
      this.$req.get(this.export_url).then(res => {
        window.open(res.data.url);
      })
    },
    // 接受文件上传成功
    onSuccess (e) {
      console.log("onSuccess", e);
    },
    // 接受文件移除
    onRemove (e) {
      console.log("onRemove", e);
    },
    // 接受文件预览
    onPreview (e) {
      console.log("onPreview", e);
    },

  }
};
</script>
<style lang='scss' scoped>
.title {
  display: inline-block;
  margin-bottom: 50px;
}

@media screen and (max-width: 1600px) {
  .form_content {
    width: 1000px;
    // margin: 0 auto;
  }
}
@media screen and (max-width: 1800px) {
  .form_content {
    width: 1200px;
    // margin: 0 auto;
  }
}
.table_content {
  display: flex;
  position: relative;
  .new_btn {
    position: absolute;
    left: 0;
    top: -70px;
  }
}
/deep/.el-dialog {
  max-height: 700px;
  overflow: hidden;
  overflow-y: auto;
  overflow-x: auto;
}
</style>